import React, { Component } from 'react'
import { Toast } from 'antd-mobile';
import Header from '../../components/Header';
import './Shop.less'
import { reqAddList, reqShopDel, reqShopedit } from '../../http/api';
import have from '../../assets/img/have.jpeg'
import no from '../../assets/img/no.jpeg'
import './ShopList/ShopList.less'
// 引入过滤器
import { filterPrice } from '../../filter';
export default class Shop extends Component {

    constructor() {
        super()
        this.state = {
            // 初始化
            shoplist: [],
            // 初始化总价
            allChecked: false,//默认为不选中
            isRequest: true,
            arr: 0
        }
    };

    componentDidMount() {
        // 一进页面就发请求
        this.show_list()
    }
    show_list() {
        reqAddList({
            uid: JSON.parse(sessionStorage.getItem('user')).uid
        }).then(res => {
            if (res.data.code === 200) {
                let arr = res.data.list[1].content ? res.data.list[1].content : [];
                // 补checked
                arr.forEach(item => {
                    let obj = this.state.shoplist.find((i) => i.id === item.id);
                    item.checked = obj ? obj.checked : false
                    // item.checked = false;//默认为false

                })
                // console.log(arr);
                // 赋值
                this.setState({
                    shoplist: arr
                })
                // console.log(this.state.shoplist);\
                // 打开开关
                let { isRequest } = this.state
                isRequest = false
            }
        })
    }

    del(id) {
        // 发请求
        reqShopDel({ id: id }).then(res => {
            if (res.data.code === 200) {
                // 1.弹成功
                Toast.success('删除成功', 1);
                // 2.渲染列表
                this.show_list()
            }

        })
    }
    add(id) {
        let token = JSON.parse(sessionStorage.getItem('user')).token
        //    发请求
        reqShopedit({
            token,
            type: 2,
            id,
        }).then(res => {
            // 重新渲染列表
            this.show_list()
        })
    }
    sub(id, num) {
        if (num <= 1) {
            Toast.info('宝贝不能再减少了');
            return;
        }
        let { isRequest } = this.state
        if (isRequest) {
            // 关掉开关
            isRequest = false
            //  发请求
            reqShopedit({
                token: JSON.parse(sessionStorage.getItem('user')).token,
                type: 1,
                id
            }).then(res => {
                // 渲染列表
                this.show_list()

            })
        }

    }

    // 选中一个
    changeOne(index) {
        let { shoplist } = this.state

        shoplist[index].checked = !shoplist[index].checked
        // 放回去
        this.setState({
            shoplist: [...shoplist]
        })
        //修改了全选按钮 
        this.setState({
            allChecked: shoplist.every(item => {
                return item.checked
            }),
            // shoplist: [...shoplist]
        })
    }
    // 点击了全选按钮
    allChecked() {
        let { shoplist, allChecked } = this.state
        // 其他的都要选中---修改全选
        this.setState({
            allChecked: !allChecked,
            shopist: shoplist.forEach(item => {
                return item.checked = !allChecked
            }),
        })
    }
    render() {

        let { shoplist, del, allChecked, isRequest, arr } = this.state
        console.log(this.props);

        console.log(shoplist);
        // 计算总价
        let allPrice = shoplist.reduce((val, item) => {
            return item.checked ? val += item.price * item.num : val
        }, 0)
        return (
            <div className="shop">
                <Header title="购物车" back></Header>
                <div className="shop_nav">
                    <ul>
                        <li>销量</li>
                        <li>特价</li>
                        <li>降价</li>
                    </ul>
                </div>
                <div>

                    {<div onClick={() => this.allChecked()}>
                        全选：  <img style={{ width: '0.3rem', height: '0.3rem' }} src={allChecked ? have : no} alt="" />
                    </div>
                    }
                    总价：{filterPrice(allPrice)}
                </div>
                {/* 传递 */}
                {/* <ShopList {...this.state} sub={()=>this.sub()} add={this.add.bind(this)} del={(id)=>this.del(id)} ></ShopList> */}
                <div className="shoplist">
                    <ul>

                        {
                            shoplist.map((item, index) => {
                                return (
                                    <li key={item.id}>
                                        <div className="left">
                                            <div className="xuanze_img" onClick={() => this.changeOne(index)} >
                                                <img src={item.checked ? have : no} alt="" />
                                            </div>
                                            <img src={item.img} alt="" />
                                        </div>
                                        <div className="right">
                                            <p>{item.goodsname}</p>
                                            <div>数量：{item.num}</div>
                                            <button onClick={() => this.add(item.id)}>+</button>
                                            <span>{item.num}</span>
                                            <button onClick={() => this.sub(item.id, item.num)}>-</button>
                                            <button className="del" onClick={() => this.del(item.id)}>删除</button>
                                        </div>
                                    </li>
                                )
                            })
                        }

                    </ul>

                </div>
            </div>
        )
    }
}
